<template>
  <div class="search-bar" >
     <div class="search-bar__title">顺丰快递数据查询</div>
       <el-autocomplete placeholder="请输入运单信息" 
       v-model="keyword" 
       class="search-bar__input"
       @keyup.native.enter="search"
       :fetch-suggestions="querySearchAsync"
       @select="handleSelect"
       debounce
       >
       <template slot-scope="{item}">
         <div class="history-item">{{item.ssls}}</div>
       </template>
         <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
       </el-autocomplete>
  </div>
</template>
<script>
import mSearch from '@/base/mixin/m-search'
import {mapState} from 'vuex'
export default {
    mixins: [mSearch],
    data () {
      return {
        keyword: ''
      }
    },
    computed: {
      ...mapState(['myUser_idCard', 'mySearchBar_query'])
    },
    methods: {
      querySearchAsync(queryString, cb) {
        let res;
        if(queryString) {
          res = this.mSearch.history.list ? this.mSearch.history.list.filter(r => r.ssls.includes(queryString)) : [];
        } else {
          res = this.mSearch.history.list || [];
        }
        cb(res);
      },
      handleSelect(item) {
        this.keyword = item.ssls;
        console.log(item);
      },
      search() {
        // this.$router.push('/search-result');
        let o = this.mySearchBar_query;
        let query = `keyword=${this.keyword}&sjd=${o.sjd || ''}&kssj=${o.kssj || ''}&jssj=${o.jssj || ''}&fw=${o.fw || ''}`;
        let url = `/#/search-result?${query}`;
        window.open(url);
      }
    },
    mounted() {
      this.getSearchHistory({sfzh: this.myUser_idCard})
    }
  }
</script>